import React from 'react'
import './Markdown.css'
import marked from 'marked'
marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
});
import $ from 'jquery'

export default class Markdown extends React.PureComponent {
    static defaultProps = {
        text: null,
        file: null,
    }
    loading = false
    constructor(props) {
        super(props)
        this.id = ''.random(20)
        this.state = {
            text: this.props.text,
        }
        this.loadFile()
    }
    loadFile = () => {
        if (this.props.file) {
            $.get(this.props.file).done((res) => {
                this.setState({
                    text: res,
                })
            })
        }
    }
    render() {
        const { text, file, ...rest } = this.props
        return (
            <div {...rest}>
                {this.props.children}
                <div className='ulli md mdp mdh1 mdh2 mdh3 mdh4 mdh5 mdh6 mdimg mdblockquote mdpre' id={this.id} {...rest}>
                </div>
                <div style={{height:'2rem'}}></div>
            </div>
        )
    }
    componentDidUpdate() {
        document.getElementById(this.id).innerHTML = marked(this.state.text || '');
    }
}